import React, {useState, useEffect} from 'react'
import {Divider, Input} from 'antd-mobile'
import {Flex} from 'antd'
import {RightOutline} from 'antd-mobile-icons'

import baseInfo from './index.module.css'


//函数
function BaseInfo() {
    
		//联系人
    const [name, setName] = useState('')
		//手机号码
		const [number, setNumber] = useState('')


    //[]空数组相当于componentDidMount
    useEffect(() => {

        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);
		
		function setUserName(userName){
			setName(userName)
		}
		
		function setPhoneNumbe(phoneNumbe){
			setNumber(phoneNumbe)
		}

    return (<div className={baseInfo.container}>

        <Flex gap="small" justify='space-between'>
            <span>联系人:</span>
            <div>
                <Input type={'text'}
											 value={name}
											 onChange={setUserName}
                       maxLength={5}
                       placeholder='请输入联系人姓名'
                       style={{'--text-align': 'right', '--font-size': '14px'}}
                       clearable/>
            </div>
        </Flex>
        <Divider></Divider>

        <Flex gap="small" justify='space-between'>
            <span>手机号:</span>
            <div>
                <Input
                    type={'number'}
										value={number}
										onChange={setPhoneNumbe}
                    placeholder='请输入联系电话'
                    style={{'--text-align': 'right', '--font-size': '14px'}}
                    clearable
                />
            </div>
        </Flex>
        <Divider></Divider>

        <Flex gap="small" justify='space-between'>
            <span>问题来源:</span>
            <div>
                <span style={{'color': '#9FA3AA'}}>微信公众号</span>
                <RightOutline/>
            </div>
        </Flex>
        <Divider></Divider>

        <Flex gap="small" justify='space-between'>
            <span>问题等级:</span>
            <div>
                <span style={{'color': '#9FA3AA'}}>日常</span>
                <RightOutline/>
            </div>
        </Flex>
        <Divider></Divider>

    </div>)
}


export default BaseInfo

